<template>
  <a-drawer
    title="添加图表"
    :width="600"
    placement="right"
    :closable="false"
    v-model:visible="visible"
  >
    <div class="modudel-list-box">
      <a-empty v-if="!moudelList.length" style="padding-top: 180px">
        <template #description>
          没有可添加的图表<router-link class="primary-color" to="/module">立即创建</router-link>
        </template>
      </a-empty>

      <a-table
        v-if="moudelList.length"
        rowKey="_id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="moudelList"
      />

      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button
          type="primary"
          :loading="addLoading"
          :disabled="!selectedRowKeys.length"
          @click="addMoudelToKanban"
          >添加到看板</a-button
        >
      </div>
    </div>
  </a-drawer>
</template>

<script>
  import { SmileTwoTone } from '@ant-design/icons-vue';
  import { defineComponent, ref, reactive, toRefs } from 'vue';
  import io from '@/utils/http/index.js';
  import { useStore } from 'vuex';
  import { showTypeMap } from '@/constants/showType.js';

  const columns = [
    {
      title: '名称',
      dataIndex: 'title',
    },
    {
      title: '类型',
      dataIndex: 'type',
    },
    {
      title: '描述',
      dataIndex: 'describe',
    },
  ];

  export default defineComponent({
    components: {
      SmileTwoTone,
    },

    setup(props) {
      const store = useStore();

      const state = reactive({
        visible: false,
        loading: true,
        addLoading: false,
        moudelList: [],
        selectedRowKeys: [],
      });

      // 获取图表列表
      const getList = () => {
        state.moudelList = [];
        io({
          url: '/show/api/module',
        }).then((res) => {
          const selectList = store.state.kanban.selectedKanban.moduleList;
          res.data.forEach((o) => {
            const some = selectList.some((v) => v.module._id === o._id);
            if (!some) {
              state.moudelList.push(o);
            }
          });
          state.loading = false;
        });
      };

      // 打开抽屉
      const showDrawer = () => {
        state.visible = true;
        getList();
      };

      // 选中图表
      const onSelectChange = (selectedRowKeys) => {
        state.selectedRowKeys = selectedRowKeys;
      };

      // 看板添加图表
      const addMoudelToKanban = () => {
        state.addLoading = true;
        let list = [];
        state.selectedRowKeys.forEach((o) => {
          let find = state.moudelList.find((v) => v._id === o);
          list.push({
            module: o,
            w: showTypeMap[find.type].attribute.width,
            h: showTypeMap[find.type].attribute.height,
          });
        });

        const kanbanId = store.state.kanban.selectedKanban._id;

        io({
          url: '/show/api/addMoule',
          method: 'post',
          data: {
            kanbanId: kanbanId,
            moduleList: list,
          },
        }).then((res) => {
          // 获取看板详情
          store
            .dispatch('kanban/getKanbanDetails', kanbanId)
            .then((res) => {
              store.commit('kanban/setParams', {
                selectedKanban: res.data,
              });
              state.addLoading = false;
              state.visible = false;
            })
            .catch((e) => {
              console.log(e);
            });
        });
      };

      return {
        ...toRefs(state),
        showDrawer,
        columns,
        onSelectChange,
        addMoudelToKanban,
      };
    },
  });
</script>
